<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img img {
            width: 1000px;
            /*filter: grayscale(0.5);*/
            /*黄棕色*/
            /*filter: sepia(.5);*/
            /*脑合度*/
            /*filter: saturate(100%);*/
            /*色相（色轮）*/
            /*filter: hue-rotate(10deg);*/
            /*负片*/
            /*filter: invert(1);*/
            /*透明度*/
            /*filter: opacity(.5);*/
            /*明度*/
            /*filter: brightness(0);*/
            /*对比度*/
            /*filter: contrast(100%);*/
            /*filter: drop-shadow(10px 10px 2px black);*/

        }


        .img {
            text-align: center;
        }
    </style>
    <script>
        var count = 0;
        var filter=['grayscale(0.5)','sepia(.5)','saturate(50%)','hue-rotate(180deg)','invert(1)','opacity(.5)','brightness(2)','drop-shadow(10px 10px 2px black)'];
        window.onload = function () {
            var img = document.getElementsByClassName("img")[0];
            var g = document.getElementById('img');
            img.onclick = function () {
                count++;
                g.style.filter = filter[count%8];
            }
        }
    </script>
</head>
<body>
<div class="img">
    <img id='img' src="img3.jpg" alt="">
</div>
</body>
</html>